<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" @click="goBack"></i>
            <p>注册</p>
            <div></div>
        </header>
        <div class="top-ban"></div>
        <h1>欢迎注册</h1>
        <!-- <table>
            <tr>
                <td>手机号码</td>
                <td><input type="text" v-model="user.userId" placeholder="请输入手机号码" /></td>
            </tr>
            <tr>
                <td>真实姓名</td>
                <td><input type="text" v-model="user.realName" placeholder="真实姓名便于查看体检报告" /></td>
            </tr>
            <tr>
                <td>生日</td>
                <td><input type="date" v-model="user.birthday" /></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" v-model="user.sex" value="1" />男
                    <input type="radio" v-model="user.sex" value="0" />女
                </td>
            </tr>
            <tr>
                <td>身份证号</td>
                <td><input type="text" v-model="user.identityCard" placeholder="请输入身份证号" /></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" v-model="user.password" placeholder="请输入密码" /></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="password" v-model="user.confirmPassword" placeholder="请再次输入密码" /></td>
            </tr>
        </table> -->
        <el-form :rules="rules" ref="form"  :model="user" label-width="120px">
            <el-form-item label="手机号码" prop="userId">
                <el-input v-model="user.userId" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="user.realName" placeholder="真实姓名便于查看体检报告"></el-input>
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
                <el-date-picker v-model="user.birthday" type="date" placeholder="选择生日"></el-date-picker>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="user.sex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="身份证号" prop="identityCard">
                <el-input v-model="user.identityCard" placeholder="请输入身份证号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="user.password" type="password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input v-model="user.confirmPassword" type="password" placeholder="请再次输入密码" show-password></el-input>
            </el-form-item>
        </el-form>
        <div class="btn" @click="register">完成</div>
    </div>
</template>

<script setup>
import { reactive, toRefs, ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from "../plugin/axiosInstance";

const router = useRouter();
const form = ref(null)
const user = reactive({
    userId: '',
    realName: '',
    birthday: '',
    sex: 1,
    identityCard: '',
    password: '',
    confirmPassword: ''
});

const rules = {
    userId: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ],
    realName: [
        { required: true, message: '请输入真实姓名', trigger: 'blur' }
    ],
    birthday: [
        { required: true, message: '请选择生日', trigger: 'change' }
    ],
    sex: [
        { required: true, message: '请选择性别', trigger: 'change' }
    ],
    identityCard: [
        { required: true, message: '请输入身份证号', trigger: 'blur' },
        { pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 3, message: '密码长度不能小于3位', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { min: 3, message: '密码长度不能小于3位', trigger: 'blur' },
    ],
    
}



const goBack = () => {
    history.go(-1);
};

const register = () => {
    // // 表单验证
    // if (user.userId === '') {
    //     alert('手机号码不能为空！');
    //     return;
    // }
    // if (user.realName === '') {
    //     alert('真实姓名不能为空！');
    //     return;
    // }
    // if (user.birthday === '') {
    //     alert('生日不能为空！');
    //     return;
    // }
    // if (user.identityCard === '') {
    //     alert('身份证号不能为空！');
    //     return;
    // }
    // if (user.password === '') {
    //     alert('密码不能为空！');
    //     return;
    // }
    // if (user.password !== user.confirmPassword) {
    //     alert('两次密码输入不一致！');
    //     return;
    // }

    form.value.validate(async (valid)=>{
        if(valid){
            // 发送注册请求
    axios.post('users/register', user)
        .then((response) => {
            if (response.data.code === 200) {
                alert('注册成功！');
                router.push('/login');
            } else {
                alert(response.data.message);
            }
        })
        .catch((error) => {
            console.error(error);
        });
        }
    });

    // // 发送注册请求
    // axios.post('users/register', user)
    //     .then((response) => {
    //         if (response.data.code === 200) {
    //             alert('注册成功！');
    //             router.push('/login');
    //         } else {
    //             alert(response.data.message);
    //         }
    //     })
    //     .catch((error) => {
    //         console.error(error);
    //     });
};

</script>

<style scoped>
@import '@/assets/css/register.css';
</style>